<template>
  <div>
    <el-dialog
      title="题目预览"
      :visible="shouDia"
      @close="btnCanenl"
    >
      <el-row
        type="flex"
        justify="centre"
      >
        <!-- 第一行 -->
        <el-col :span="5">
          <span>【题型】：{{questionIS(rows)}}</span>
        </el-col>
        <el-col :span="5">
          <span>【编号】：{{rows.id}}</span>
        </el-col>
        <el-col :span="5">
          <span>【难度】：{{nanduIS(rows)}}</span>
        </el-col>
        <el-col :span="5">
          <span>【标签】：{{rows.tags}}</span>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row
        type="flex"
        justify="centre"
        style="margin-top: 15px; margin-botton: 10px;"
      >
        <el-col :span="5">
          <span>【学科】：{{subjectIS(rows)}}</span>
        </el-col>
        <el-col :span="5">
          <span>【目录】：{{catalogueIS(rows)}}</span>
        </el-col>
        <el-col :span="5">
          <span>【方向】：{{rows.direction}}</span>
        </el-col>
      </el-row>
      <!-- 分割 -->
      <hr />
      <div class="gao">【题干】：</div>
      {{ rows.question}}
      <hr />
      <div class="gao">【参考答案】： <el-button
          type="danger"
          @click="video"
        >视频答案预览
        </el-button>
        <br />
        <video
          v-if="videos"
          class="videos"
          :src="rows.videoURL"
          controls
          muted
        ></video>
      </div>
      <hr />
      <div class="gao">【答案解析】：{{rows.answer}}</div>
      <hr />
      <div class="gao">【题目备注】：{{rows.remarks}}</div>
      <!-- 关闭按钮 -->
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-row
          type="flex"
          justify="end"
        >
          <el-button
            type="primary"
            @click="btnCanenl"
          >关 闭</el-button>
        </el-row>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: 'Dd',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {
    shouDia: {
      type: Boolean,
      required: true
    },
    rows: {
      type: [Array, Object],
      required: true

    },
    subject: {
      type: Array,
      required: true
    },
    catalogue: {
      type: Array,
      required: true
    }
  },
  // 组件状态值
  data () {
    return {
      videos: false // 视频控件
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () { },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {
    // 题型格式化
    questionIS (rows) {
      if (Number(rows.questionType) === 1) {
        return '单选题'
      } else if (Number(rows.questionType) === 2) {
        return '多选题'
      } else {
        return '简答题'
      }
    },
    // 难度格式化
    nanduIS (rows) {
      if (Number(rows.difficulty) === 1) {
        return '简单'
      } else if (Number(rows.difficulty) === 2) {
        return '一般'
      } else {
        return '困难'
      }
    },
    subjectIS (rows) {
      const subjectObjs = this.subject.find(item => item.value === rows.subjectID)
      return subjectObjs ? subjectObjs.label : '未知'
    },
    catalogueIS (rows) {
      const catalogueObjs = this.catalogue.find(item => item.value === rows.catalogID)
      return catalogueObjs ? catalogueObjs.label : '未知'
    },
    // 视频播放
    video () {
      this.videos = true
    },
    btnCanenl () {
      this.$emit('update:shouDia', false)
    }
  }
}
</script>

<style scoped lang="css">
.videos {
  width: 300px;
  height: 200px;
}
.gao {
  margin: 20px 0;
}
</style>
